<link rel="stylesheet" href="__CDN__/assets/addons/vuemagic/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/vuemagic/common.css">
<script src="__CDN__/assets/addons/vuemagic/vue.js"></script>
<script src="__CDN__/assets/addons/vuemagic/element/element.js"></script>
<script src="__CDN__/assets/addons/vuemagic/Sortable.min.js"></script>
<script src="__CDN__/assets/addons/vuemagic/vuedraggable.js"></script>
<script src="__CDN__/assets/addons/vuemagic/moment.js"></script>
<!--以上js文件不是必须的，您可以将不使用的js删除掉，这里为了考虑所有字段类型情况全部进行了引入-->
<div id="formDetail" v-cloak>
    <div class="form-bodys">
        <el-form :model="baseFrom" ref="baseFrom" :rules="rules" label-width="114px" class="demo-baseFrom">
                   <el-form-item label="{:__('Train_id')}：" prop="train_id">
         <div class="display-flex">
                    <div class="user-container">
                        <el-select style="position: relative;" v-model="baseFrom.train_id"  filterable
                            size="medium" placeholder="" :filter-method="dataTrainFilter">
                            <el-option v-for="item in aboutTrainOptions" :key="item.id" :label="item.name??item.username"
                                :value="item.id">
                                <!--可根据自己的业务需求加工一下代码样式-->
                                <div class="display-flex" style="justify-content: space-around;">
                                    <span>{{ item.id }}</span>
                                    <div style="width: 24px;">
                                        <img v-if="item.image??item.avatar" style="width:24px;height:24px;border-radius:50%;"
                                            :src="Fast.api.cdnurl(item.image??item.avatar)">
                                    </div>
                                    <div style="width: 80px;">{{ item.name??item.username }}</div>
                                    <div style="width: 90px;">
                                        <div style="width: 90px;" v-if="item.mobile">{{ item.mobile }}</div>
                                        <div style="width: 90px;text-align: center;" v-else>-</div>
                                    </div>
                                </div>
                            </el-option>
                            <div class="text-center"
                                style="position: sticky;background: #fff;height:38px;top:0;z-index:1">
                                <div class="text-normal display-flex" style="justify-content: center;">
                                    <el-pagination class="pagination" :page-sizes="[6]" :current-page="currentTrainPage"
                                        :total="totalTrainPage" layout="total, sizes, prev, pager,next, jumper"
                                        pager-count="5" @size-change.stop="pageTrainSizeChange"
                                        @current-change="pageTrainCurrentChange" />
                                    </el-pagination>
                                    <div style="cursor: pointer;color: #7438D5;margin-left: 8px;" @click="getTrain">跳转
                                    </div>
                                </div>
                            </div>
                        </el-select>
                    </div>
                    <!--<div class="form-tip">此处可以放字段说明等信息</div>-->
                </div>
       </el-form-item>
        <el-form-item label="{:__('User_id')}：" prop="user_id">
         <div class="display-flex">
                    <div class="user-container">
                        <el-select style="position: relative;" v-model="baseFrom.user_id"  filterable
                            size="medium" placeholder="" :filter-method="dataUserFilter">
                            <el-option v-for="item in aboutUserOptions" :key="item.id" :label="item.name??item.username"
                                :value="item.id">
                                <!--可根据自己的业务需求加工一下代码样式-->
                                <div class="display-flex" style="justify-content: space-around;">
                                    <span>{{ item.id }}</span>
                                    <div style="width: 24px;">
                                        <img v-if="item.image??item.avatar" style="width:24px;height:24px;border-radius:50%;"
                                            :src="Fast.api.cdnurl(item.image??item.avatar)">
                                    </div>
                                    <div style="width: 80px;">{{ item.name??item.username }}</div>
                                    <div style="width: 90px;">
                                        <div style="width: 90px;" v-if="item.mobile">{{ item.mobile }}</div>
                                        <div style="width: 90px;text-align: center;" v-else>-</div>
                                    </div>
                                </div>
                            </el-option>
                            <div class="text-center"
                                style="position: sticky;background: #fff;height:38px;top:0;z-index:1">
                                <div class="text-normal display-flex" style="justify-content: center;">
                                    <el-pagination class="pagination" :page-sizes="[6]" :current-page="currentUserPage"
                                        :total="totalUserPage" layout="total, sizes, prev, pager,next, jumper"
                                        pager-count="5" @size-change.stop="pageUserSizeChange"
                                        @current-change="pageUserCurrentChange" />
                                    </el-pagination>
                                    <div style="cursor: pointer;color: #7438D5;margin-left: 8px;" @click="getUser">跳转
                                    </div>
                                </div>
                            </div>
                        </el-select>
                    </div>
                    <!--<div class="form-tip">此处可以放字段说明等信息</div>-->
                </div>
       </el-form-item>
        <el-form-item label="{:__('Sign')}：" prop="sign">
                                  <div class="display-flex">
                            <div class="goods-image-box display-flex" v-if="baseFrom.sign">
                                <div class="goods-images" style="margin-right: 0;">
                                    <img :src="'../ajax/icon?suffix='+baseFrom.sign.substring(baseFrom.sign.indexOf('.') + 1)" class="label-auto" style="border-radius: 4px;">
                                    <div class="del-image-btn" @click="delImg('image',null,'sign')">
                                        <img class="label-auto" src="/assets/addons/vuemagic/img/close.png">
                                    </div>
                                </div>
                            </div>
                             <div class="add-img display-flex" @click="addImg('image',null, false,'sign','/*')"
                                v-if="!baseFrom.sign">
                                <i class="el-icon-plus"></i>
                            </div>
                            <div class="msg-tip">文件描述，如：建议尺寸、大小等</div>
                        </div>



       </el-form-item>
        </el-form>
    </div>
    <div class="page-footer display-flex">
        <div @click="baseSub" class="btn-common footer-btn-1">取消</div>
        <div @click="baseSub('yes','baseFrom')" class="btn-common footer-btn-2">确定</div>
    </div>
</div>
